<template>
    <span class="photo_hover" @mouseover.stop.prevent="setFolded(false)" @mouseout.stop.prevent="setFolded(true)">
            <i class="icon-photo icon" :class="{openF:!folded}" ></i>
        <transition name="fade">
            <div v-show="!folded" class="show-wrapper ui segment">
                    <button  title="修改密码" class="ui button mini" @click.stop.prevent="change_pwd()">
                        修改密码
                    </button>
            </div>
        </transition>

    </span>
</template>

<script>

    import tool from 'src/util/tool';
    import util from '_util/index';

    export default{
      data(){
        return {
            folded:true
        }
      },
        methods:{
            change_pwd() {
                let option = {
                    name: 'change_pwd'
                };
                util.showPopCom(this, option);
            },
            setFolded(b) {
                this.folded = b;
            },
        }
    };
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import "../../common/style/mixin";

    .fade-transition();

    .photo_hover {
        position: relative;
        display: block;
    }
    .show-wrapper.ui.segment {
        width:110px;
        text-align: right;
        position: absolute;
        display: inline-block;
        right: 30px;
        padding-right: 6px;
        top: 0px;
        /*background-color: rgba(255,255,255,0.9);*/
        background-color: transparent;
        z-index: 1001;
    }
</style>